<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>设备管理 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .status-badge {
            font-size: 0.8em;
        }
        .battery-low {
            color: #dc3545;
        }
        .battery-medium {
            color: #ffc107;
        }
        .battery-high {
            color: #28a745;
        }
        .real-time-status {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="fas fa-tractor"></i> 无人车设备管理</h2>
                    <div>
                        <button class="btn btn-info me-2" onclick="refreshStatus()">
                            <i class="fas fa-sync-alt"></i> 刷新状态
                        </button>
                        <a href="/vehicles/add" class="btn btn-primary">
                            <i class="fas fa-plus"></i> 添加设备
                        </a>
                    </div>
                </div>
                
                <!-- 状态统计卡片 -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card text-white bg-primary">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4 class="card-title" th:text="${vehicles.size()}">0</h4>
                                        <p class="card-text">总设备数</p>
                                    </div>
                                    <i class="fas fa-tractor fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-white bg-success">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4 class="card-title" id="workingCount">0</h4>
                                        <p class="card-text">工作中</p>
                                    </div>
                                    <i class="fas fa-play fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-white bg-info">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4 class="card-title" id="idleCount">0</h4>
                                        <p class="card-text">空闲</p>
                                    </div>
                                    <i class="fas fa-pause fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-white bg-warning">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4 class="card-title" id="maintenanceCount">0</h4>
                                        <p class="card-text">维护中</p>
                                    </div>
                                    <i class="fas fa-wrench fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 设备列表表格 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">设备列表</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>ID</th>
                                        <th>设备名称</th>
                                        <th>设备类型</th>
                                        <th>状态</th>
                                        <th>电量</th>
                                        <th>位置</th>
                                        <th>最后更新</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="vehicle : ${vehicles}">
                                        <td th:text="${vehicle.id}"></td>
                                        <td>
                                            <strong th:text="${vehicle.name}"></strong><br>
                                            <small class="text-muted" th:text="${vehicle.serialNumber}"></small>
                                        </td>
                                        <td th:text="${vehicle.type}"></td>
                                        <td>
                                            <span th:class="'badge status-badge ' + 
                                                  (${vehicle.status.name()} == 'WORKING' ? 'bg-success real-time-status' : 
                                                   ${vehicle.status.name()} == 'IDLE' ? 'bg-primary' : 
                                                   ${vehicle.status.name()} == 'MAINTENANCE' ? 'bg-warning' : 
                                                   ${vehicle.status.name()} == 'CHARGING' ? 'bg-info' : 'bg-danger')"
                                                  th:text="${vehicle.status.description}"></span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i th:class="'fas fa-battery-' + 
                                                    (${vehicle.batteryLevel} != null and ${vehicle.batteryLevel} > 75 ? 'full battery-high' :
                                                     ${vehicle.batteryLevel} != null and ${vehicle.batteryLevel} > 50 ? 'three-quarters battery-high' :
                                                     ${vehicle.batteryLevel} != null and ${vehicle.batteryLevel} > 25 ? 'half battery-medium' :
                                                     ${vehicle.batteryLevel} != null and ${vehicle.batteryLevel} > 10 ? 'quarter battery-low' : 'empty battery-low')"></i>
                                                <span class="ms-1" th:text="${vehicle.batteryLevel != null ? vehicle.batteryLevel + '%' : 'N/A'}"></span>
                                            </div>
                                        </td>
                                        <td>
                                            <span th:if="${vehicle.latitude != null and vehicle.longitude != null}" 
                                                  th:text="${#numbers.formatDecimal(vehicle.latitude, 1, 4)} + ',' + ${#numbers.formatDecimal(vehicle.longitude, 1, 4)}"></span>
                                            <span th:unless="${vehicle.latitude != null and vehicle.longitude != null}" class="text-muted">未知</span>
                                        </td>
                                        <td>
                                            <small th:text="${vehicle.lastUpdateTime != null ? #temporals.format(vehicle.lastUpdateTime, 'MM-dd HH:mm') : 'N/A'}"></small>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a th:href="@{/vehicles/{id}(id=${vehicle.id})}" class="btn btn-sm btn-outline-info" title="详情">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a th:href="@{/vehicles/edit/{id}(id=${vehicle.id})}" class="btn btn-sm btn-outline-primary" title="编辑">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a th:href="@{/vehicles/{id}/control(id=${vehicle.id})}" class="btn btn-sm btn-outline-success" title="远程控制">
                                                    <i class="fas fa-gamepad"></i>
                                                </a>
                                                <a th:href="@{/vehicles/{id}/maintenance(id=${vehicle.id})}" class="btn btn-sm btn-outline-warning" title="维护">
                                                    <i class="fas fa-wrench"></i>
                                                </a>
                                                <a th:href="@{/vehicles/delete/{id}(id=${vehicle.id})}" class="btn btn-sm btn-outline-danger" title="删除"
                                                   onclick="return confirm('确定删除此设备吗？')">
                                                    <i class="fas fa-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 统计各状态设备数量
        function updateStatusCounts() {
            const vehicles = /*[[${vehicles}]]*/ [];
            let workingCount = 0, idleCount = 0, maintenanceCount = 0;
            
            vehicles.forEach(vehicle => {
                switch(vehicle.status) {
                    case 'WORKING': workingCount++; break;
                    case 'IDLE': idleCount++; break;
                    case 'MAINTENANCE': maintenanceCount++; break;
                }
            });
            
            document.getElementById('workingCount').textContent = workingCount;
            document.getElementById('idleCount').textContent = idleCount;
            document.getElementById('maintenanceCount').textContent = maintenanceCount;
        }
        
        // 刷新设备状态
        function refreshStatus() {
            location.reload();
        }
        
        // 页面加载时更新统计
        document.addEventListener('DOMContentLoaded', updateStatusCounts);
        
        // 每30秒自动刷新状态
        setInterval(refreshStatus, 30000);
    </script>
</body>
</html>